Day3 按鈕

Button

按鈕幾乎是所有App都會使用到的UI元件，而SwiftUI的按鈕為Button，一個最基本的按鈕：

Button("Button") {
}

Button帶入字串，就會顯示按鈕的名稱。

Button也可以自定義按鈕的名稱或者外型，例如：

Button(action: {
            
}, label: {
    HStack {
        Image(systemName: "suit.heart.fill")
        Text("Button")
    }
})

這裡加入了一個水平排版的圖片與文字內容。

如果要讓按鈕產生作用，可以宣告一個@State變數，然後在按鈕按下時觸發這個變數，這邊的條件是會將變數累加1，也就是每次按下按鈕時，變數都會加上1，例如：

@State private var count = 0
    
var body: some View {
    Text("\(count)")
        
    Button(action: {
        count += 1
    }, label: {
        HStack {
            Image(systemName: "suit.heart.fill")
            Text("Button")
        }
    })
}

所以這裡再次使用狀態變數，如果在變數前面宣告@State，就是一個狀態變數。在SwiftUI裡，狀態變數被改變，畫面就會自動被更新，而不需要加入任何邏輯判斷去更新畫面。

Button可以說是在SwiftUI中非常重要的UI元件，而除了Button之外，SwiftUI還有其它三個互動元件，Slider、Stepper與Toggle。

Slider

Slider是一種滑動元件，例如：

@State var value: Float = 0.3
    
var body: some View {
    Text("\(value)")
    Slider(value: $value)        
}

這個範例使用Slider來調整變數value的值。

Stepper為兩個按鈕組合元件，一個累加，另外一個累減，例如：

Stepper("\(value)", onIncrement: {
    value = value + 0.1
}, onDecrement: {
    value = value - 0.1
})

這個範例使用Stepper來調整變數value的值，按下左邊，每次就會累加0.1，按下右邊，每次就會累減0.1。

Toggle

Toggle是一個開關元件，例如：

@State var isOn: Bool = false
    
var body: some View {
    Toggle(isOn: $isOn, label: {
        Text("\(isOn.description)")
    })     
}

這個範例使用Toggle來調整變數isOn的值，而Toggle只能綁定宣告為布林的變數。

如果要將變數的顯示在畫面上，則將變數isOn，放入到Text內：

Toggle(isOn: $isOn) {
    Text("Toggle")
}
        
Text(isOn.description)

如此一來，當Toggle更改開或關時，會去更新狀態變數，而這個狀態變數被改變時，畫面就會自動更新。

從 SwiftUI 到 Apple Vision Pro - SwiftUI 從零開始 Day3 [完]